<template>
  <div class="container" :style="containerStyle" ref="top">
    <template v-if="loaded">
      <div class="header">
        <text class="icon back" @click="goBack()">&#xe600;</text>
        <text :class="['header-nav', itemSearchParam.filter=='STARTED' && 'header-nav-active']" @click="selectFilter('STARTED')">正在抢购</text>
        <text :class="['header-nav', itemSearchParam.filter=='WILL_START' && 'header-nav-active']" @click="selectFilter('WILL_START')">即将开抢</text>
        <text :class="['header-nav', itemSearchParam.filter=='SALE_OUT' && 'header-nav-active']" @click="selectFilter('SALE_OUT')">待追加</text>
      </div>
      <div class="shopcat-scrollbar" ref="shopcatBar">
        <shopcat-scrollbar v-on:shopcatSelected="shopcatSelected"
                           :shopcatIds="itemSearchParam.shopcatId"></shopcat-scrollbar>
      </div>
      <div class="filter-bar">
        <text :class="['filter-bar-item', itemSearchParam.sort == '' && 'filter-bar-item-active']"
              sort="" @click="sort">综合</text>
        <div @click="sort" class="filter-bar-item" sortType="PRICE">
          <text
              :class="['sort-item-price', (itemSearchParam.sort == 'PRICE_ASC' || itemSearchParam.sort == 'PRICE_DESC') && 'filter-bar-item-active']">价格</text>
          <div class="sort-price-carets">
            <text :class="['icon', 'sort-icon', itemSearchParam.sort == 'PRICE_ASC' && 'filter-bar-item-active']">&#xe78f;</text>
            <text :class="['icon', 'sort-icon', itemSearchParam.sort == 'PRICE_DESC' && 'filter-bar-item-active']">&#xe791;</text>
          </div>
        </div>
        <text :class="['filter-bar-item', itemSearchParam.sort == 'START_TIME_DESC' && 'filter-bar-item-active']"
              sort="START_TIME_DESC"
              @click="sort">上新</text>
        <text :class="['filter-bar-item', itemSearchParam.sort == 'HOT' && 'filter-bar-item-active']"
              sort="HOT"
              @click="sort">人气</text>
      </div>
      <list class="item-list-container" @scroll="onPageScroll">
        <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                      :indicatorScale="indicatorScale"></page-refresh>
        <cell v-if="spItemList.length" v-bind:key="rowIdx" v-for="(itemList, rowIdx) in spItemRowList">
          <item-cell @spItemClick="spItemClick" :itemList="itemList"></item-cell>
        </cell>
        <cell>
          <page-notice msg="抱歉，什么都木有找到～" :icon="sorryIcon" v-if="!spItemList.length && !hasNext"></page-notice>
        </cell>
        <page-loading-more v-on:loadingMore="onLoadingMore" :loadingMore="loadingMore"
                           :shown="hasNext"></page-loading-more>
      </list>
      <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
      <wxc-loading :show="loadingShow"></wxc-loading>
    </template>
    <page-loading :loaded="loaded"></page-loading>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/buttons";

  $filter-bar-height: 70px;
  $font-size: 28px;
  $item-color: $color-gray;

  .back {
    font-size: 46px;
    color: #ffffff;
    position: absolute;
    left: 20px;
    bottom: 20px;
  }

  .container {
    background-color: $body-bg;
    transition: transform .3s linear;
    position: relative;
  }

  .shopcat-scrollbar {
    background-color: #ffffff
  }

  .header {
    padding-top: 50px;
    background-color: $brand-primary;
    height: 130px;
    flex-direction: row;
    justify-content: center;
    position: relative;
    &-nav {
      color: #ffffff;
      font-size: 32px;
      height: 80px;
      line-height: 80px;
      padding:0 35px;
      &-active {
        background-color: #ffffff;
        color: $color-primary;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
      }
    }
  }

  .filter-bar {
    flex-direction: row;
    align-items: center;
    @include border-bottom(1px, solid, #ddd);
    @include border-top(1px, solid, #ddd);
    background-color: #fff;
    color: $item-color;
    &-item {
      flex: 1;
      justify-content: center;
      align-items: center;
      height: $filter-bar-height;
      text-align: center;
      line-height: $filter-bar-height;
      font-size: $font-size;
      flex-direction: row;
      color: $item-color;
      &-icon {
        font-size: $font-size;
        color: $item-color;
      }
      &-active {
        color: $color-primary;
      }
    }

    &-types {
      align-items: center;
      padding: 0 10px;
      &-item {
        align-items: center;
        justify-content: center;
      }
    }
  }

  .sort-icon {
    font-size: 14px;
    color: #cbcbcb;
    height: 14px;
    line-height: 14px;
  }

  .sort-item-price {
    font-size: $font-size;
    color: $item-color;
  }

  .sort-price-carets {
    margin-left: 5px;
    height: 60px;
    color: $color-muted;
    justify-content: center;
    align-items: center;
  }

</style>
<script>

import {WxcLoading} from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let dom = weex.requireModule('dom')
let urlPath = require('./include/url-path')
let navigator = require('./include/xnavigator')
let queryparser = require('./include/queryparser')
let grouping = require('./include/grouping')

let config = require('./include/app-config')
const DEFAULT_ITEM_SEARCH_PARAM = {
  page: 1,
  sort: '',
  keywords: '',
  ecomPlat: '',
  shopcatId: '',
  filter: 'STARTED'
}
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more'),
    require('./mixin/page-loading'),
    require('./mixin/page-scrolltop')
  ],
  components: {
    'shopcat-scrollbar': require('./components/shopcat-scrollbar.vue'),
    'page-notice': require('./components/page-notice.vue'),
    navbar: require('./components/navbar.vue'),
    WxcLoading,
    'item-cell': require('./components/sp-item-cell.vue')
  },
  props: {
    recommend: {default: ''}
  },
  data () {
    return {
      spItemList: [],
      spItemRowList: [],
      refreshing: false,
      refreshIndicatorScale: 0.2,
      hasNext: true,
      shopcatId: '',
      sorryIcon: 'images/aiya.png',
      logo: 'images/logo.png',
      itemSearchParam: Object.assign({}, DEFAULT_ITEM_SEARCH_PARAM),
      containerStyle: {},
      loadingShow: false,
      iosShow: false,
      loaded: false
    }
  },
  created () {
    config.bindConfig(this)
    let params = queryparser(weex.config.bundleUrl)
    Object.assign(DEFAULT_ITEM_SEARCH_PARAM, params)
    this.itemSearchParam = Object.assign({}, DEFAULT_ITEM_SEARCH_PARAM)
    this.sorryIcon = urlPath.assets(this.sorryIcon)
    this.logo = urlPath.assets(this.logo)
    Deferred.when(this.loadData(), this.searchItem()).always(() => {
      this.loaded = true
    })
  },
  methods: {
    loadData () {

    },
    goBack () {
      navigator.pop()
    },
    resetSearchParam () {
      Object.assign(this.itemSearchParam, DEFAULT_ITEM_SEARCH_PARAM)
      this.hasNext = true
    },
    selectFilter (filter) {
      this.itemSearchParam.filter = filter
      this.doSearch()
    },
    sort (event) {
      let target = event.target
      let sort = target.attr.sort
      // weex.requireModule('modal').alert({message: JSON.stringify(target.attr)})
      if (target.attr.sortType === 'PRICE') {
        sort = this.itemSearchParam.sort === 'PRICE_DESC' ? 'PRICE_ASC' : 'PRICE_DESC'
      }
      this.itemSearchParam.sort = sort
      this.doSearch()
    },
    doSearch () {
      this.loadingShow = true
      this.searchItem().always(() => {
        dom.scrollToElement(this.$refs.top)
        this.loadingShow = false
      })
    },
    searchItem (append, callback) {
      return api.sellerPromotionItem.search(this.itemSearchParam).done((rs) => {
        if (append) {
          this.spItemList = this.spItemList.concat(rs.data.results)
        } else {
          this.spItemList = rs.data.results
        }
        this.spItemRowList = grouping(this.spItemList, 2)
        let paging = rs.data
        this.hasNext = paging.hasNext
      }).always(() => {
        callback && callback()
      })
    },
    searchBarSearch (kw) {
      DEFAULT_ITEM_SEARCH_PARAM.keywords = kw
      this.resetSearchParam()
      this.loadingShow = true
      this.itemSearchParam.keywords = kw
      this.searchItem().always(() => {
        dom.scrollToElement(this.$refs.top)
        this.loadingShow = false
      })
    },
    onXRefresh (event) {
      this.itemSearchParam.page = 1
      this.onRefresh(event, Deferred.when(this.loadData(), this.searchItem().always(() => {
        dom.scrollToElement(this.$refs.top)
      })))
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.itemSearchParam.page = this.itemSearchParam.page + 1
      this.searchItem(true, () => {
        this.loadingMore = false
      })
    },
    gotoTop () {
      let dom = weex.requireModule('dom')
      dom.scrollToElement(this.$refs.top)
    },
    shopcatSelected (shopcat) {
      this.loadingShow = true
      this.itemSearchParam.shopcatId = shopcat.id
      this.searchItem(false, rs => {

      }).always(() => {
        dom.scrollToElement(this.$refs.top)
        this.loadingShow = false
      })
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    filterbarChange () {
      this.loadingShow = true
      this.searchItem(false, rs => {
        this.loadingShow = false
      })
    },
    spItemClick (item) {
      navigator.push('sp-item.js?id=' + item.id)
    }
  }
}
</script>
